<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title>注册</title> 
    <meta name="viewport" content="height = device-height, width=device-width, initial-scale=1, user-scalable=no">
    <link href="${ctxStatic}/jqmobile/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.css" rel="stylesheet"> 
	<script src="${ctxStatic}/jquery/1.11.1/jquery-1.11.1.min.js"></script>
	<script src="${ctxStatic}/jqmobile/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.js"></script>	
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
    <div data-role="content">
    <form action="${ctx}/addShop" id="form" method="post" target="_blank">
		<div class="ui-field-contain">
		    <label for="phone">手机号码:<div id="phonemsg"><c:if test="${pmessage ne null}"><font color="red"><div id="pmessage">${pmessage}！</div></font></c:if></div></label>
		    <input type="text" name="phone" id="phone" placeholder="输入手机号码作为用户名" value="${phone}">
		</div>
		<div class="ui-field-contain">
		    <label for="password">密码:<div id="passwordmsg"><c:if test="${passmessage ne null}"><font color="red"><div id="passmessage">${passmessage}！</div></font></c:if></div></label>
		    <input type="text" name="password" id="password" placeholder="输入文本" value="${password}">
		</div>
		<div class="ui-field-contain">
		    <label for="repassword">重复密码:<div id="cpasswordmsg"><c:if test="${repassmessage ne null}"><font color="red"><div id="repassmessage">${repassmessage}！</div></font></c:if></div></label>
		    <input type="text" name="repassword" id="repassword" placeholder="输入文本" value="${repassword}">
		</div>
		<div class="ui-field-contain">
		    <label for="shopName">店名:<div id="shopnamemsg"><c:if test="${dmessage ne null}"><font color="red"><div id="dmessage">${dmessage}！</div></font></c:if></div></label>
		    <input type="text" name="shopName" id="shopName" placeholder="输入文本" value="${shopName}">
		</div>
		<div class="ui-field-contain">
		    <label for="address">地址:<div id="addressmsg"><c:if test="${amessage ne null}"><font color="red"><div id="amessage">${amessage}！</div></font></c:if></div></label>
		    <input type="text" name="address" id="address" placeholder="输入文本" value="${address}">
		</div>
		<br>
        <div data-controltype="textblock" style=" text-align:left">
            <p>
            <strong>
                填写您的<font color="green"><i>店名</i></font>和<font color="green"><i>详细地址</i></font>，便于卡卡为您推广。
                </strong>
            </p>
        </div>
        <div class="ui-field-contain">
        <input type="hidden" name="openid" value="${openid}">
	    <button type="submit" id="submit-1" class="ui-shadow ui-btn ui-corner-all">注册</button>
		</div>
        </form>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#phone").change(function(){
	$("#phonemsg").empty();
	$("#pmessage").empty();
	$.ajax( {
		url : '${ctx}/phoneCheck',
		type : 'post',
		dataType : 'json',
		data : {phone:$("#phone").val()},
		success : function(json) {
			if (json.message == '用户名可用') {
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#phonemsg').append($optbatch);
 			}else if(json.message == '用户名已存在'){
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#phonemsg').append($optbatch);
			}else if(json.message == '请输入正确手机号'){
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#phonemsg').append($optbatch);				
			}else{
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#phonemsg').append($optbatch);				
			}
		}
	});
});
$("#password").change(function(){
	$.ajax( {
		url : '${ctx}/passwordCheck',
		type : 'post',
		dataType : 'json',
		data : {password:$("#password").val()},
		success : function(json) {
			if (json.message == '请输入密码') {
				$("#passwordmsg").empty();
				var $optbatch = $("<font color='red'>请输入密码！</font>");	
				$('#passwordmsg').append($optbatch);								
			}else{
				$("#passwordmsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");	
				$('#passwordmsg').append($optbatch);												
			}
		}
	});
});
$("#repassword").change(function(){
	$.ajax( {
		url : '${ctx}/repasswordCheck',
		type : 'post',
		dataType : 'json',
		data : {password:$("#password").val(),repassword:$("#repassword").val()},
		success : function(json) {
			if (json.message == '请重复输入密码') {
				$("#cpasswordmsg").empty();
				var $optbatch = $("<font color='red'>请重复输入密码！</font>");	
				$('#cpasswordmsg').append($optbatch);								
			}else if(json.message == 'ok'){
				$("#cpasswordmsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");	
				$('#cpasswordmsg').append($optbatch);												
			}else{
				$("#cpasswordmsg").empty();
				var $optbatch = $("<font color='red'>前后密码不一致！</font>");	
				$('#cpasswordmsg').append($optbatch);															
			}
		}
	});
});
$("#shopName").change(function(){
	$.ajax( {
		url : '${ctx}/shopNameCheck',
		type : 'post',
		dataType : 'json',
		data : {shopName:$("#shopName").val()},
		success : function(json) {
			if (json.message == '店名可用') {
 				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#shopnamemsg').append($optbatch);
 			}else if(json.message == '用户名已存在'){
				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#shopnamemsg').append($optbatch);
			}else{
				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#shopnamemsg').append($optbatch);				
			}
		}
	});
});
$("#address").change(function(){
	$.ajax( {
		url : '${ctx}/addressCheck',
		type : 'post',
		dataType : 'json',
		data : {address:$("#address").val()},
		success : function(json) {
			if (json.message == '地址可用') {
 				$("#addressmsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#addressmsg').append($optbatch);
 			}else if(json.message == '地址已存在'){
				$("#addressmsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#addressmsg').append($optbatch);
			}else{
				$("#addressmsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#addressmsg').append($optbatch);				
			}
		}
	});
});

});
</script>
</body> 
</html>